<template>
	<div class="dashboard-editor-container">
		<!--<panel-group />
		<el-row class="linechart">
			<line-chart />
		</el-row>
		<el-row :gutter="32">
			<el-col :xs="24" :sm="24" :lg="8">
				<div class="chart-wrapper chart-wrapper-option">
					<div class="raddarchart_type">
						<el-cascader v-model="legend" :options="legendData" :props='props' :show-all-levels="false" placeholder="请选择类型" @change="changeType" clearable style='width: 130px;'></el-cascader>
					</div>
					<raddar-chart :type='type' />
				</div>
			</el-col>
			<el-col :xs="24" :sm="24" :lg="8">
				<div class="chart-wrapper">
					<pie-chart />
				</div>
			</el-col>
			<el-col :xs="24" :sm="24" :lg="8">
				<div class="chart-wrapper">
					<bar-chart />
				</div>
			</el-col>
		</el-row>-->
	</div>
</template>

<script>
	import GithubCorner from '@/components/GithubCorner'
	import PanelGroup from './components/PanelGroup'
	import LineChart from './components/LineChart'
	import RaddarChart from './components/RaddarChart'
	import PieChart from './components/PieChart'
	import BarChart from './components/BarChart'
	import { majorList } from '@/api/major.js'
	export default {
		name: 'DashboardAdmin',
		components: {
			GithubCorner,
			PanelGroup,
			LineChart,
			RaddarChart,
			PieChart,
			BarChart
		},
		data() {
			return {
				props: {
					value: 'id',
					label: 'text',
				},
				legendData: [],
				legend: [],
				type: '',
			}
		},
		created() {
			this.getMejars()
		},
		methods: {
			getMejars() {
				majorList().then(result => {
					this.legendData = result.children;
				})
			},
			changeType(){
				if(this.legend && Array.isArray(this.legend)){
					this.type = this.legend[this.legend.length-1]
				}else{
					this.type = ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.linechart {
		background: #fff;
		padding: 16px 16px 0;
		margin-bottom: 32px;
	}
	
	.raddarchart_type {
		position: absolute;
		left: 16px;
		top: 16px;
		height: auto;
		z-index: 1;
	}
	
	.dashboard-editor-container {
		padding: 32px;
		background-color: rgb(240, 242, 245);
		position: relative;
		.github-corner {
			position: absolute;
			top: 0px;
			border: 0;
			right: 0;
		}
		.chart-wrapper {
			background: #fff;
			padding: 16px 16px 0;
			margin-bottom: 32px;
			position: relative;
		}
	}
	
	@media (max-width: 1024px) {
		.chart-wrapper {
			padding: 8px;
		}
	}
</style>